import { Table, Space, Button, Card, message, Image, Breadcrumb, Modal, Form, DatePicker, InputNumber } from "antd";
import { useEffect, useState } from "react";
import { useComms } from "../../hook/comms";
import { useSecondKill } from "../../hook/secondKill"
import moment from 'moment';

const { RangePicker } = DatePicker;

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};


//eslint-disable-next-line
export default () => {
    const [form] = Form.useForm();
    const [{ rows, eachPage, curPage, total }, { getComms, setCurPage }] = useComms();
    const [,{addSecKill,delSecKill}]=useSecondKill()
    const [_Id, set_Id] = useState("")

    // 数据请求
    useEffect(() => {
        getComms();
    }, [getComms]);

    // 修改类型信息
    const reset = async _id => {
        set_Id(_id)
        setIsModalVisible(true)
    }

    // 删除类型信息
    const delComms = async _id => {
        await delSecKill({_id});
        message.success("移除成功")
        getComms();
    }


    // 对话框状态设置
    const [isModalVisible, setIsModalVisible] = useState(false);

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '库存',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '商品详情',
            dataIndex: 'desc',
            key: 'desc',
        },
        {
            title: '商品海报',
            dataIndex: 'poster',
            key: 'poster',
            render: record => {
                return record[0] ? <Image width={50} src={`http://localhost:3002${record[0]}`} /> : <p>暂无图片</p>;
            },
        },
        {
            title: '操作',
            key: 'action',
            render: record => {
                return !record.isAttend ? <Space>
                    <Button type="primary" size="small" onClick={() => reset(record._id)}>加入活动</Button>
                    <Modal footer={null} title="Basic Modal" visible={isModalVisible}>
                        <Form
                            {...formItemLayout}
                            form={form}
                            name="addComm"
                            onFinish={onFinish}
                            scrollToFirstError
                            style={{ width: "500px", margin: "auto" }}
                        >
                            <Form.Item
                                name="count"
                                label="限制份数"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入限制份数！',
                                    },
                                ]}
                            >
                                <InputNumber min={0} max={5} />
                            </Form.Item>

                            <Form.Item
                                name="Sale"
                                label="折扣"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入商品折扣！',
                                    },
                                ]}
                            >
                                <InputNumber min={0} max={1} />
                            </Form.Item>
                            <Form.Item name="Time" label="秒杀时间"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择活动时间！',
                                    },
                                ]}
                            >
                                <RangePicker />
                            </Form.Item>
                            <Form.Item {...tailFormItemLayout} style={{ display: "flex", alignItems: "center" }}>
                                <div style={{ width: "200px", display: "flex", justifyContent: "space-between" }}>
                                    <Button type="primary" htmlType="submit">
                                        新增秒杀商品
                                    </Button>
                                    <Button onClick={() => handleCancel()}>
                                        取消
                                    </Button>
                                </div>
                            </Form.Item>
                        </Form>
                    </Modal>
                </Space> : <Space size="middle">
                    <Button type="primary" danger size="small" onClick={() => delComms(record._id)}>移出活动</Button>
                </Space>
            },
        },
    ];

    // 弹出层完成
    const onFinish = async (values) => {
        const { Sale, count, Time } = values;
        const time = Time.map(item => moment(item).format("YYYY-MM-DD"))
        const data=await addSecKill({_id:_Id, Sale, count, Time:time})
        console.log(data);
        setIsModalVisible(false);
        getComms();
    }


    return (
        <div className="site-card-border-less-wrapper">
            <Card title="新增秒杀商品" bordered={true}>
                <Card>
                    <Breadcrumb>
                        <Breadcrumb.Item>主页</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            秒杀商品
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            新增秒杀
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </Card>
                <Table style={{ maeginTop: "20px" }} columns={columns} pagination={{
                    current: curPage, pageSize: eachPage, total, onChange: setCurPage
                }} dataSource={rows} rowKey={record => record._id} />
            </Card>
        </div>
    )
}